<template>
  <div class="chat-sidebar">
    <div class="sidebar-header">
      <div class="search-box">
        <el-input
          v-model="searchText"
          placeholder="搜索聊天记录"
          size="small"
          clearable
        />
      </div>
    </div>

    <div class="sidebar-content">
      <div class="chat-list">
        <div
          v-for="chat in filteredChats"
          :key="chat.id"
          class="chat-item"
          :class="{ active: chat.id === activeChatId }"
          @click="selectChat(chat)"
        >
          <div class="chat-avatar">
            <el-avatar :size="40" :src="chat.avatar">
              <el-icon><User /></el-icon>
            </el-avatar>
            <span v-if="chat.unreadCount > 0" class="unread-badge">{{
              chat.unreadCount
            }}</span>
          </div>

          <div class="chat-info">
            <div class="chat-name">{{ chat.name }}</div>
            <div class="chat-preview">{{ chat.lastMessage }}</div>
          </div>

          <div class="chat-meta">
            <div class="chat-time">{{ formatTime(chat.lastTime) }}</div>
            <div v-if="chat.isOnline" class="online-indicator"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="sidebar-footer">
      <el-button type="primary" @click="startNewChat">
        <el-icon><Plus /></el-icon>
        新建聊天
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  activeChatId: {
    type: [String, Number],
    default: null,
  },
});

const emit = defineEmits(["select-chat", "new-chat"]);

const searchText = ref("");

// 模拟聊天列表数据
const chats = ref([
  {
    id: 1,
    name: "张三",
    avatar: "",
    lastMessage: "你好，最近怎么样？",
    lastTime: new Date(),
    unreadCount: 2,
    isOnline: true,
  },
  {
    id: 2,
    name: "李四",
    avatar: "",
    lastMessage: "好的，我明白了",
    lastTime: new Date(Date.now() - 3600000),
    unreadCount: 0,
    isOnline: false,
  },
  {
    id: 3,
    name: "王五",
    avatar: "",
    lastMessage: "谢谢你的帮助",
    lastTime: new Date(Date.now() - 7200000),
    unreadCount: 1,
    isOnline: true,
  },
  {
    id: 4,
    name: "赵六",
    avatar: "",
    lastMessage: "明天见面聊",
    lastTime: new Date(Date.now() - 86400000),
    unreadCount: 0,
    isOnline: false,
  },
]);

const filteredChats = computed(() => {
  if (!searchText.value) return chats.value;

  return chats.value.filter(
    (chat) =>
      chat.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
      chat.lastMessage.toLowerCase().includes(searchText.value.toLowerCase())
  );
});

const selectChat = (chat) => {
  emit("select-chat", chat);
};

const startNewChat = () => {
  emit("new-chat");
};

const formatTime = (date) => {
  const now = new Date();
  const diff = now - date;

  if (diff < 60000) return "刚刚";
  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`;
  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`;

  return date.toLocaleDateString();
};
</script>

<style scoped lang="scss">
.chat-sidebar {
  width: 300px;
  height: 100%;
  background: #fff;
  border-right: 1px solid #e5e8ef;
  display: flex;
  flex-direction: column;

  .sidebar-header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;

    .search-box {
      .el-input {
        .el-input__wrapper {
          border-radius: 20px;
        }
      }
    }
  }

  .sidebar-content {
    flex: 1;
    overflow-y: auto;

    .chat-list {
      .chat-item {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        cursor: pointer;
        border-bottom: 1px solid #f8f8f8;
        transition: all 0.2s;
        position: relative;

        &:hover {
          background: #f8f9fa;
        }

        &.active {
          background: #e6f7ff;
          border-left: 3px solid #1890ff;
        }

        .chat-avatar {
          position: relative;
          margin-right: 12px;

          .unread-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ff4d4f;
            color: white;
            border-radius: 10px;
            min-width: 18px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            font-size: 12px;
            padding: 0 4px;
          }
        }

        .chat-info {
          flex: 1;
          min-width: 0;

          .chat-name {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .chat-preview {
            font-size: 12px;
            color: #999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .chat-meta {
          display: flex;
          flex-direction: column;
          align-items: flex-end;

          .chat-time {
            font-size: 12px;
            color: #999;
            margin-bottom: 4px;
          }

          .online-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #52c41a;
          }
        }
      }
    }
  }

  .sidebar-footer {
    padding: 20px;
    border-top: 1px solid #f0f0f0;

    .el-button {
      width: 100%;
      border-radius: 6px;
    }
  }
}

// 滚动条样式
.sidebar-content::-webkit-scrollbar {
  width: 6px;
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.sidebar-content::-webkit-scrollbar-track {
  background: #f0f0f0;
}
</style>
